<template>
  <el-row>
    <!--<span>(hasPsw == 0 ? '设置密码' : '修改密码')</span>-->
    <el-col :span="16" :offset="4">
      <el-steps :active="active" align-center>
        <el-step title="验证身份"></el-step>
        <el-step :title="hasPsw ? '修改密码' : '设置密码'"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </el-col>
    <el-col :span="24" style="margin-top:25px;">
      <el-form class="el-form-col" :model="model" label-position="left" ref="elForm" label-width="120px">
        <el-row class="row">
          <template v-if="active == 1">
            <el-col :span="16" :offset="4">
              <el-form-item label="登录手机">
                <el-input readonly :value="strPhone"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="16" :offset="4">
               <el-form-item prop="code" label="验证码" :rules="[
              {required: true, message: '验证码必须', trigger: 'blur'}
            ]">
                 <el-input v-model="model.code">
                   <template slot="append">
                     <el-button  @click.prevent="getVerificationCode" :disabled="times > 0">{{ verificationCodeText }}</el-button>
                   </template>
                 </el-input>
               </el-form-item>
             </el-col>
          </template>
          <template v-if="active == 2">

            <el-col :span="16" :offset="4" key="pwd">
              <el-form-item prop="pwd" label="请输入新密码" :rules="[
               {required: true, message: '请输入新密码', trigger: 'blur'},
               {required: true, message: '新密码长度必须为6位', min: 6, max: 6, trigger: 'blur'},
              {validator: isInteger, message: '请填写6位整数！', trigger: 'blur'}
            ]">
                <el-input type="password" v-model="model.pwd"/>
              </el-form-item>
            </el-col>
            <el-col :span="16" :offset="4" key="pwdTwo">
              <el-form-item prop="pwdTwo" label="再次确认" :rules="[
              {required: true, message: '再次确认必须', trigger: 'blur'},
              {validator: isSame, otherValue: model.pwd, message: '两次输入的密码不一致', trigger: 'blur'}
            ]">
                <el-input type="password" v-model="model.pwdTwo"/>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="active ==3">
            <el-col  :span="16" :offset="4" class=" text-center">
              <el-form-item label-width="0px">
                <p><i class="el-icon-success m--font-success" style="font-size: 80px"></i></p>
                <p>{{(hasPsw ? '修改密码成功' : '设置密码成功')}}</p>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="16" :offset="4">
            <el-button style="width:100%" class="btn-block btn-lg" :loading="loading" type="primary" @click.prevent="submit">{{ active == 3 ? '确定' : '下一步' }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import {filterDataBaseDictionary} from '@/filters'
import {isSame, isInteger} from '@/utils/validate'
import {dotData, alert} from '@/utils'
// let timer = null
export default {
  name: 'myWalletSetPsdShow',
  components: {
  },
  filters: {
    filterDataBaseDictionary
  },
  data() {
    return {
      active: 1,
      userData: {},
      phone: '',
      hasPsw: 0, // 0无钱包密码， 1 有
      model: {
        code: '',
        pwd: '',
        pwdTwo: '',
        backTrueCodeId: '' // 二次验证码，旧fhb 提交时需要的参数
      },
      verificationCodeText: '获取验证码',
      getVerificationCodeButtonDisabled: false,
      config: {
        times: 60
      },
      times: 0,
      loading: false
    }
  },
  created() {
    // 获取用户phone,用的是 scm的接口 修正 storage 接口 ms-user-info, httpGetResponse
    this.$ajax.get('/ms-common-user/user/get-user').then(response => {
      if (response) {
        this.phone = dotData(response, 'data.phone')
        // this.phone = dotData(response, 'FhbUser.phone')
        console.log('当前用户的this.phone', this.phone)
      }
    })
    // 检查是否 已有钱包密码
    this.$ajax.get('/ms-user-wallet/wallet/wallet-validation').then(response => {
      if (dotData(response, 'success')) {
        this.hasPsw = dotData(response, 'data.isPassword')
      }
    })
  },
  computed: {
    strPhone() {
      let temp = this.phone || ''
      return temp.substr(0, 3) + '*****' + temp.substr(-3, 3)
    }
  },
  methods: {
    isInteger,
    isSame,
    // 发送验证码, 用的是fhb里面的接口
    getVerificationCode() {
      this.times = this.config.times
      this.timeReduce()
      this.$ajax.get('/ms-verification/sms/sendCode', {phone: this.phone, actionId: 'walletPasswordReset'})
    },
    // 倒计时
    timeReduce() {
      if (this.times > 0) {
        this.verificationCodeText = this.times + 's'
        setTimeout(this.timeReduce, 1000)
        this.times -= 1
      } else {
        this.verificationCodeText = '获取验证码'
      }
    },
    // 验证：验证码
    checkCode() {
      // 旧fhb的逻辑：发送检查 验证码正确后 返回一个二次验证码backTrueCodeId，用于最后提交修改密码 参数
      let __checkData = {
        phone: this.phone,
        code: this.model.code
      }
      this.loading = true
      this.$ajax.get('/ms-user-wallet/wallet/check-verification-code', __checkData).then(response => {
        this.loading = false
        const success = dotData(response, 'success')
        if (success) {
          this.model.backTrueCodeId = dotData(response, 'data.key') // 获取code正确后返回来的二次验证码
          console.log('正确后返回来的二次验证码', this.model.backTrueCodeId)
          this.active = 2
        } else {
          alert('验证码错误')
        }
      })
    },
    // 修改密码
    changePassword() {
      let data = {
        newPassword: this.model.pwd,
        code: this.model.backTrueCodeId // 旧fhb需要的二次验证码
      }
      this.loading = true
      // 旧fhb：/ms-fahuobao-user/wallet/reset-password
      this.$ajax.post('/ms-user-wallet/wallet/reset-password', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.active = 3
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    // 提交 按钮合并：
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        if (this.active === 1) { // 点 下一步 --> 检查验证码（包含了发送验证码）
          this.checkCode()
        } else if (this.active === 2) { // 点 提交--> 提交表单
          this.changePassword()
        } else if (this.active === 3) { // 点 确定 ---> 跳转到首页
          this.$router.push({path: '/ss-oms/myWallet/index'})
        }
      })
    }
  }
}
</script>
